import React, { Component, Fragment } from 'react';
import Market from './Market';
import NotOn from './NotOn';
import { Menu } from 'antd';
import Page from './Page';
import Release from './Release';

import styles from './index.module.less';

export default class Goods extends Component {
  state={
    active: 2,
  };
  onHandTwo = () => {
    this.setState({
      active: 2,
    });
  };
  onHandThree = () => {
    this.setState({
      active: 3,
    });
  };
  onHandFour = () => {
    this.setState({
      active: 4,
    });
  };
  render() {
    const { active } = this.state;
    return (
      <div className={styles.clearfix}>
        <div className={styles.left + ' ' + styles.pullLeft}>
          <Menu
            onClick={this.onMenuSelect}
            style={{ width: 170 }}
            defaultSelectedKeys={[ 'helpHome' ]}
            mode='inline'
          >
            <Menu.SubMenu key='1' title='通用商品管理'>
              <Menu.Item key='2' onClick={this.onHandTwo.bind(this)}>发布商品</Menu.Item>
              <Menu.Item key='3' onClick={this.onHandThree.bind(this)}>销售中的商品</Menu.Item>
              <Menu.Item key='4' onClick={this.onHandFour.bind(this)}>未上架的商品</Menu.Item>
            </Menu.SubMenu>
          </Menu>
        </div>
        <div className={styles.right + ' ' + styles.pullLeft}>
          <div
            style={{
              display: active !== null && active === 2 ? 'block' : 'none',
            }}
          >
            <Release></Release>
          </div>
          <div
            style={{
              display: active !== null && active === 3 ? 'block' : 'none',
            }}
          >
            <Market />
          </div>
          <div
            style={{
              display: active !== null && active === 4 ? 'block' : 'none',
            }}
          >
            <NotOn />
          </div>
          <div
            className={styles.page + ' ' + styles.clearfix}
            style={{
              display: active !== null && active === 3 || active === 4 ? 'block' : 'none',
            }}
          >
            <Page></Page>
          </div>
        </div>
      </div>
    );
  }
}
